<template>
  <div>
    <div class="top">
      <div>注册新用户</div>
      <div>我有账号，去 <router-link to="/login">登陆</router-link></div>
    </div>
    <van-form @failed="onFailed">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field v-model="phone" name="pattern" label="手机号:" placeholder="请输入手机号"
          :rules="[{ pattern, message: '手机号不合法' }]" />
        <!-- 通过 validator 进行函数校验 -->

        <van-field v-model="code" name="validator" label="验证码:" placeholder="请输入验证码"
          :rules="[{ validator, message: '请输入正确格式的验证码' }]">
          <!-- 通过 validator 返回错误提示 -->
          <template #button>
            <van-button size="small" @click="sendCode" type="primary">发送验证码</van-button>
          </template>
        </van-field>

        <van-field v-model="password" name="validatorMessage" label="登陆密码:" placeholder="请输入登陆密码"
          :rules="[{ validator: validatorMessage, message: '密码为6到16个字符构成的字符串，允许使用大小写字母、数字和下划线' }]" />


        <!-- 通过 validator 进行异步函数校验 -->
        <van-field v-model="confirmPassword" name="asyncValidator" label="确认密码:" placeholder="请输入确认密码"
          :rules="[{ validator: asyncValidator, message: '重复密码必须和登录密码一致' }]" />
        <!-- 复选框 -->
        <van-field name="checkbox">
          <template #input>
            <!-- v-model="checked" -->
            <van-checkbox v-model="checked" shape="square" />
            <div style="font-size: 12px;">
              同意服务条款 和隐形政策和网易严选服务协议
            </div>
          </template>

        </van-field>

      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" @click="getRegister" native-type="submit">
          提交
        </van-button>
      </div>

    </van-form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  name: 'Register',
})
</script>
<script lang="ts" setup>
import { reqCode, reqRegister } from '@/api/user';
import { ref } from 'vue';
import { showToast, showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router'
const phone = ref('');
const router = useRouter()
const checked = ref(false);
const code = ref('');
const password = ref('');
const confirmPassword = ref('');
const pattern = /^1[3-9]\d{9}$/;
// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val: any) => /^\d{6}$/.test(val);

// 校验函数可以直接返回一段错误提示
const validatorMessage = (val: any) => /^[a-zA-Z0-9_]{6,16}$/.test(val);

// 校验函数可以返回 Promise，实现异步校验
const asyncValidator = (val: any) => {
  if (password.value !== val) {
    return false
  }
  return true
}
//验证
const onFailed = async (errorInfo: any) => {
  console.log('failed', errorInfo);




};
//   //点击注册
async function getRegister() {
  if (validator(code.value) && pattern && validatorMessage(password.value) && asyncValidator(confirmPassword.value)) {
    if (checked.value) {
      //注册
      const params = {
        phone: phone.value,
        password: password.value,
        code: code.value
      }
      try {
        const res = await reqRegister(params)
        console.log(res);
        showSuccessToast('注册成功');
        router.push({ path: '/login' })
      }
      catch (error) {
        showFailToast('注册失败');
      }
    }else {
    showToast('您需要同意相关条款才能使用');
  }
  } 
}
//发送验证码
async function sendCode() {
  const res = await reqCode(phone.value)
  code.value = res
}




</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  height: 100px;
  line-height: 100px;
  font-size: 16px;
}
</style>